<template>
  <div>
    <van-nav-bar :title="$route.meta.title" left-text="返回" left-arrow :fixed="true" :placeholder="true" @click-left="$router.go(-1)" :right-text="auditBtn" @click-right="editApply()" />
    <div>
      <div class="headerbox" v-if="columns.length > 1">
        <div class="header_top" :style="{ width: columns.length * 3 + 'rem' }">
          <div class="header_item" v-for="(item, index) in columns" :key="index" @click="handleClick(index)" :class="tabIndex == index ? 'active' : ''">
            <div class="txt">{{ item.number }}</div>
            <div class="txt1">{{ item.bizDate }}</div>
          </div>
        </div>
      </div>

      <div class="carInfo">
        <div class="carInfo_title">付款单信息</div>
        <div class="carInfo_item">
          <span class="label_txt">付款单单号：</span>
          {{ dataSource.billNumber }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">款项性质：</span>
          {{ dataSource.payType }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">单据状态：</span>
          {{ dataSource.billStatus }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">品牌：</span>
          {{ dataSource.brandName }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">展厅：</span>
          {{ dataSource.showOrgName }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">签约公司：</span>
          {{ dataSource.signCompany }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">付款账号：</span>
          {{ dataSource.bankAccount }}
        </div>
        <div class="carInfo_item">
          <span class="label_txt">付款日期：</span>
          {{ dataSource.bizDate }}
        </div>
        <div class="carInfo_item">实际付款金额：{{ dataSource.actPayAmount }}</div>
        <div class="carInfo_item">合计付款金额：{{ dataSource.totalAmount }}</div>
        <div class="carInfo_item">备注：{{ dataSource.remark }}</div>
      </div>
      <div class="carInfo">
        <div class="carInfo_title">二手车供应商信息</div>
        <div class="carInfo_item">
          二手车供应商：{{
          dataSource.shSupplier ? dataSource.shSupplier : '-'
          }}
        </div>
        <div class="carInfo_item">
          二手车供应商银行：{{
          dataSource.shSupplierBank ? dataSource.shSupplierBank : '-'
          }}
        </div>
        <div class="carInfo_item">
          二手车供应商账号：{{
          dataSource.shSUpplierAccount ? dataSource.shSUpplierAccount : '-'
          }}
        </div>
        <!-- <div class="carInfo_item">
          第三方采购垫付款：{{
            dataSource.trdDisbursements ? dataSource.trdDisbursements : "-"
          }}
        </div>
        <div class="carInfo_item">
          第三方实收额：{{
            dataSource.trdReceived ? dataSource.trdReceived : "-"
          }}
        </div>-->
      </div>

      <div class="carInfo">
        <div class="carInfo_title">车辆信息</div>
        <div class="carInfo_item">采购合同：{{ dataSource.purNo ? dataSource.purNo : '-' }}</div>
        <div class="carInfo_item">车架号：{{ dataSource.vinCode ? dataSource.vinCode : '-' }}</div>
      </div>
      <van-field name="付款单附件" label="付款单附件" input-align="right" readonly value="点击查看付款单附件" @click="fileManage" />
      <div class="goBack" @click="goBack">返回</div>
      <!-- 审核情况 -->
      <AuditRecord :visible="auditVisible" :billId="dataSource.billId ? dataSource.billId : detailId" @close="auditVisible = false"></AuditRecord>
    </div>
  </div>
</template>

<script>
import sellManageApi from "@/api/sellManageApi";
import AuditRecord from "@/components/AuditRecord";
export default {
  components: {
    AuditRecord
  },
  data() {
    return {
      active: "",
      detailId: "", // 当前单据ID
      orderId: "", // 当前合同订单ID
      desBosType: "", // 单据类型 desBosType
      columns: [],
      tabIndex: 0,
      dataSource: {
        billId: "", //单据ID
        billNumber: "", //单据编号
        payType: "", //款项性质
        payTypeValue: "", //款项性质
        bandName: "", //所属品牌
        bandId: "", //所属品牌Id
        showOrgName: "", //所属展厅
        showOrgId: "", //所属展厅
        signCompany: "", //签约公司
        signCompanyId: "", //签约公司
        bankAccount: "", //付款账号
        bankAccountId: "", //付款账号
        bizDate: "", //付款日期
        actPayAmount: "", //实际付款金额
        totalAmount: "", //合计付款金额
        remark: "", //备注
        shSupplier: "", //二手车供应商
        shSupplierBank: "", //二手车供应商银行
        shSupplierAccount: "", //二手车供应商账号,提交必填
        paymentBillEntry: [
          {
            entryId: "", //分录ID
            purNo: "", //	采购合同号
            vinCode: "" //车架号
          }
        ]
      },
      auditBtn: "",
      auditVisible: false
    };
  },

  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId;
      this.orderId = this.$route.query.orderId;
      this.billNumber = this.$route.query.billNumber;

      this.desBosType = this.$route.query.desBosType;
      console.log(this.detailId);
      console.log(this.orderId);
      console.log(this.desBosType);
      this.getList(this.orderId);
    }
  },
  methods: {
    getDetail() {
      sellManageApi
        .secondHandCarFacade({
          method: "getPurchaePaymentById", //固定值
          billId: this.columns[this.tabIndex].billId //单据Id，必填，String
        })
        .then(res => {
          if (res.code == 1) {
            this.dataSource = res.data;
            if (this.dataSource.billStatus == "保存") {
              this.auditBtn = "编辑";
            } else {
              this.auditBtn = "审批情况";
            }
          }
        });
    },
    getList() {
      // 根据类型ID获取单据列表
      sellManageApi
        .secondHandCarFacade({
          method: "getDestInfoBySourceIdAndDestBosType", //固定值
          userId: "", //用户ID，必填，String
          orgId: "", //登录组织Id，必填，String
          billId: this.orderId, //单据Id，必填，String
          desBosType: "11A90D90"
        })
        .then(res => {
          if (res.code == 1) {
            if (res.data.length >= 1) {
              this.columns = res.data;
              this.getDetail();
            } else {
              this.$toast.fail("暂无该单据");
            }
          } else {
            this.$toast.fail("暂无该单据");
          }
        });
    },

    handleClick(index) {
      this.tabIndex = index;
      this.getDetail();
    },
    goBack() {
      this.$router.go(-1);
    },

    fileManage() {
      this.$router.push({
        path: "/fileMange",
        query: { billId: this.dataSource.billId }
      });
    },
    editApply() {
      if (this.dataSource.billStatus == "保存") {
        // if (this.dataSource.billStatus != '保存') {
        //   this.$toast.fail('该单据无法编辑')
        //   return
        // }
        this.$router.push({
          path: "/PaymentOrderEdit",
          query: {
            billId: this.columns[this.tabIndex].billId,
            orderId: this.orderId,
            billNumber: this.billNumber
          }
        });
      } else {
        this.auditVisible = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.headerbox {
  width: 100%;
  overflow-x: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
.header_top {
  display: flex;
  align-self: center;
  padding: 10px;
  overflow-x: auto;
  // width: 12rem;
  .header_item {
    width: 3rem;
    background: #fff;
    padding: 10px 15px;
    font-size: 12px;
    border-radius: 5px;
    margin-right: 10px;
    .txt {
      margin-bottom: 5px;
    }
    &.active {
      border: 1px solid #ccc;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
  }
}
.carInfo {
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
  .source {
    padding-left: 0 !important;
    margin-bottom: 10px;
    justify-content: space-between;

    .source_txt {
      font-size: 14px;
    }
  }

  .carInfo_No {
    margin-bottom: 15px;
    .carInfo_No_item {
      border-right: 1px solid #ccc;
      padding-right: 5px;
      margin-right: 5px;
      font-size: 12px;
      color: #333;
      &:last-child {
        border: none;
      }
    }
  }
  .carInfo_item {
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    color: #333;
    .carInfo_item_price {
      width: 50%;
      display: flex;
    }
    .label_txt {
      color: #666;
      display: block;
    }
  }
  .carInfo_title {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
  }
}
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 14px;
  margin: auto;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  margin-bottom: 12px;
  margin-top: 10px;
}
</style>
